<template>
  <div class="list">
    <div class="tit">
      捐物资讯推荐
      <p>公益捐献，新闻趣事，官方公告一目了然</p>
    </div>
    <div class="itemBox" v-for="item in listData" :key="item._id">
      <p class="stit">
        {{item.tit}}
        <span>＋查看更多</span>
      </p>
      <ul>
        <li v-for="data in item.li" :key="data.sid" @click="toDetail(data.sid)">
          <div class="bord">
            <div class="imgBox">
              <img :src="data.img" alt="" :id="data.sid" >

            </div>
            <p>{{data.txt}}</p>
          </div>

        </li>

      </ul>
    </div>
  </div>
</template>
<script>
 
export default {
  data () {
    return {
     
    }
  },
  props:['listData'],
  mounted () {
     
  },
  methods: {
    toDetail (id) {
      // let id = event.target.id
      this.$router.push(`/goodsDetail/id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  background: #fff5f6;
  padding-bottom: 30px;
  margin-top: 40px;
  .tit {
    text-align: center;
    font-size: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: hsl(19, 100%, 58%);
    color: #ffffff;
    p {
      font-size: 16px;
      color: #ffffff;
      margin-top: 5px;
    }
  }

  .itemBox {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 10px;
    .stit {
      font-size: 25px;
      span {
        float: right;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        margin-top: 10px;
      }
    }
    ul {
      // border: 1px solid;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      li {
        width: 32%;
        height: 240px;
        background: white;
        .bord {
          margin-top: -20px;
          border: 2px solid #716457;
          padding: 10px;
          background: white;
          .imgBox {
            width: 100%;
            overflow: hidden;
            height: 200px;
            img {
              transition: all 0.5s;
              width: 100%;
              cursor: pointer;
            }
            img:hover {
              transform: scale(1.05);
            }
          }
        }
        p {
          color: #666;
          margin-top: 10px;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>